<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../static/css/layui.css"/>
    <link rel="stylesheet" href="../static/js/plugins/layer/skin/layer.css"/>
    <title>欢迎访问逐光智慧伴学系统</title>
    <style>
        .logo{ float:left; color:#FFF; margin-left:10px; margin-top:5px;line-height:45px;}
        .logo img{ float:left; margin-right:10px;}
        .radius-circle{border-radius:50%;}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin ">
    <div class="layui-header" style="overflow:hidden; background:url(/static/img/bg.jpg) no-repeat 0 -1000px;">
        <div class="logo">
            <img src="../static/img/logo.png" class="radius-circle rotate-hover" height="50" alt=""/>
        </div>
        <ul class="layui-nav">
            <div style="font-size: 16px;padding-top: 18px;">逐光智慧伴学系统</div>
        </ul>

        <ul class="layui-nav layui-layout-right kit-nav">
            <li class="layui-nav-item"><p th:text="${session.loginUser.username}"></p></li>
            <li class="layui-nav-item"><a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-blue">
        <div class="layui-side-scroll" style="background-color: #0A84C5">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="tabs_nav" class="layui-nav layui-nav-tree" style="background-color: #0A84C5" lay-filter="test">
                <li class="layui-nav-item" _url="/chat">
                    <a href="javascript:;">聊天室</a>
                </li>
                <li class="layui-nav-item" _url="/common/file">
                    <a href="javascript:;">网盘</a>
                </li>
                <li class="layui-nav-item" _url="/user/index" th:if="${session.loginUser.role==0}">
                    <a href="javascript:;">用户管理</a>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body" id="container">

        <iframe src="" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto"
                onload="this.style.height=document.body.clientHeight"></iframe>
    </div>
</div>
</body>

<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".layui-nav-item").click(function(){
            var url = $(this).attr("_url");
            $("iframe").attr("src",url);

            var myNav = document.getElementById("tabs_nav").getElementsByTagName("li");
            //循环div下面所有的链接，
            for(var i=0;i<myNav.length;i++){
                //获取每一个a标签的herf属性
                var links = myNav[i].getAttribute("_url");

                //查看div下的链接是否包含当前窗口，如果存在，则给其添加样式
                if(url == links){
                    myNav[i].className+=" layui-this";
                }else{
                    myNav[i].className="layui-nav-item";
                }

            }
        })
    })

</script>
</html>
